import React, { Component } from 'react'

// import './Child1.css'
import styles from './Child1.module.css'
import classNames from 'classnames'

export default class Child1 extends Component {
  // 多个className 都需要
  state = {
    isShow: false
  }
  render () {
    // return <div className='test'>Child1</div>
    // 需要多个className 方法一：
    // return <div className={[styles.test, styles.bold].join(' ')}>Child1</div>

    return (
      // 需要多个className 方法二：第三方包写法
      // <div className={classNames(styles.test, styless.bold)}>Child1</div>

      // 需要多个className 方法二：第三方包写法(含可选判断)
      <div
        className={classNames(styles.test, styles.italic, {
          [styles.bold]: this.state.isShow
        })}
      >
        Child1
      </div>
    )
  }
}
